<template>
	<view>
		<!-- 搜索框 -->
		<uni-search-bar @confirm="handleEnter" v-model="params.bookName" placeholder="搜索记录" />

		<!-- 分类框 -->
		<uni-segmented-control :current="current" :values="items" @clickItem="handleClickItem" styleType="text"
			activeColor="#4cd964"></uni-segmented-control>

		<!-- 借阅记录 -->
		<view>
			<uni-list>
				<uni-list-item @click="()=>{handleClickListItem({lendId:borrow.lendId,bookId:borrow.bookId})}" clickable
					:border="true" v-for="borrow in showList" :key="borrow.lendId">
					<!-- 左边图片 -->
					<template v-slot:header>
						<img style="width: 100px;" :src="borrow.url" alt="">
					</template>
					<!-- 右边信息 -->
					<template v-slot:body>
						<view class="content">
							<view class="bookData">
								<view class="bookName">{{borrow.bookName}}</view>
							</view>
							<view class="borrowDate">
								<view>借阅日期：{{borrow.lendDate}}</view>
								<view>应还日期：{{borrow.shouldBackTime}}</view>
								<view>归还日期：
									<template v-if="borrow.backDate">{{borrow.backDate}}</template>
									<template v-else>---------------</template>
								</view>
								<view class="state">
									状态：
									<span class="stateData" style="color: #18bc37;" v-if="borrow.isBack">
										已还
									</span>
									<span class="stateData" style="color: #e43d33;" v-else>
										未还
									</span>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<uni-load-more :status="status"></uni-load-more>

	</view>
</template>

<script>
	import {
		getBorrowList
	} from '../../../api/system/borrow';

	export default {
		name: "borrow",
		data() {
			return {
				params: {
					bookName: "",
					userId: this.$store.getters.id,
					pageSize: 10,
					pageNum: 1,
					isBack: ""
				},
				result: {
					borrowList: [],
					total: 0
				},
				items: ['全部', '未归还', '已归还'],
				current: 0,
				status: "noMore"
			}
		},
		computed: {
			showList() {
				return this.result.borrowList
			}
		},
		methods: {
			onLoad() {
				this.getList()
			},
			// 下拉加载
			onReachBottom() {
				let allTotal = this.params.pageNum * this.params.pageSize;
				if (allTotal < this.result.total) {
					this.status = 'loading'; //加载中状态
					this.params.pageSize += 10
					this.getList()
				} else {
					this.status = 'noMore'; //加载完状态
				}
			},
			//  上拉刷新
			onPullDownRefresh() {
				this.result.borrowList = []
				this.params.pageSize = 10
				this.getList()
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 500);
			},
			// 监听搜索
			handleEnter() {
				this.result.pageSize = 10
				this.getList()
			},
			// 监听列表点击
			handleClickListItem({
				lendId,
				bookId
			}) {
				uni.navigateTo({
					url: "/pages/mine/borrow/detail/index?lendId=" + lendId + "&bookId=" + bookId,
				})
			},
			// 监听tab点击
			handleClickItem(e) {
				uni.startPullDownRefresh({})
				if (this.current != e.currentIndex) this.current = e.currentIndex;
				if (this.current == 0) this.params.isBack = ""
				else if (this.current == 1) this.params.isBack = 0
				else if (this.current == 2) this.params.isBack = 1
				this.params.pageSize = 10
				this.getList()
			},
			//  获取记录列表
			getList() {
				getBorrowList(this.params).then(res => {
					this.result.borrowList = res.rows
					this.result.total = res.total
				})
			}
		}
	}
</script>

<style scoped>
	view {
		font-size: 1em;
		color: #b3b3b3;
	}

	/deep/ .uni-list-item {
		align-items: flex-start;
	}

	/deep/ .uni-list-item__icon {
		margin: 0px;

	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bookName {
		color: #000;
		font-size: 1.2em;
	}
</style>